<template>
    <div class="sidebar-layout-wrapper">
        <el-container class="layout-container-box">
            <el-header class="layout-header-box"><Header /></el-header>
            <el-container class="main-body-box">
                <el-aside class="layout-sider-box" width="200px"><Menus /></el-aside>
                <el-main class="layout-content-box">
                    {{ keepAliveList }}
                    <router-view v-slot="{ Component, route }">
                        <transition
                            :name="!testList.includes(route.name) ? 'fade-transform' : '--'"
                            mode="out-in"
                            @before-enter="onBeforeEnter"
                            @enter="onEnter"
                        >
                            <keep-alive :include="keepAliveList">
                                <component class="component-box" :is="Component" :key="route.fullPath" />
                            </keep-alive>
                        </transition>
                    </router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import Header from '../header/header.vue';
import Menus from '../menus/menus.vue';
import { useRouter, useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { usePermissionStore } from '@/stores/index.ts';
const permissionStoreData = usePermissionStore();
const { permissionRoutes } = storeToRefs(permissionStoreData);
import { computed } from 'vue';
const route = useRoute();
const testList = ['applyItemOneChildOne', 'applyItemOneChildTwo', 'applyItemOneChildThree'];
const keepAliveList = computed(() => {
    const keepList: Array<string> = [];
    const deepMenu = (list: any) => {
        list.forEach((item: any) => {
            if (item.meta?.isKeepAlive) {
                keepList.push(item.name);
            }
            if (item.children?.length) {
                deepMenu(item.children);
            }
        });
    };
    deepMenu(permissionRoutes.value);
    debugger;
    return keepList;
});
</script>
<style lang="scss" scoped>
.sidebar-layout-wrapper {
    height: 100%;
    .layout-container-box {
        height: 100%;
    }
    .main-body-box {
        overflow: hidden;
    }
    .layout-header-box {
        margin-bottom: 2px;
        padding: 0 20px;
        background-color: var(--main-body-bg-color);
    }
    .layout-sider-box {
        background-color: var(--main-body-bg-color);
    }
    .layout-content-box {
        margin: 10px;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
    }
    .component-box {
        padding: 10px 20px;
        height: 100%;
        box-sizing: border-box;
        border: 1px solid #e8e8e8;
        background-color: #fff;
    }
}
.fade-transform {
    &-enter-from {
        transform: translateX(30px);
        opacity: 0;
        background: #ed16ed;
    }
    &-enter-to {
        opacity: 1;
    }
    &-leave-from {
        opacity: 1;
    }
    &-leave-to {
        opacity: 0;
    }
    &-enter-active {
        transition: all 0.7s ease;
    }
    &-leave-active {
        transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
    }
}
</style>
